<template>
  <div class="followings-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      :title="'用户关注【' + totalCount + '】'"
      left-arrow
      @click-left="$router.back()"
      fixed
    />
    <van-list
      class="followings"
      offset="10"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
    >
      <van-cell
        v-for="item in list"
        :key="item.id.toString()"
        class="venCell"
        is-link
        :to="{
          name: 'toUser',
          params: { userId: item.id, isLoginUser: false }
        }"
      >
        <div class="left" slot="title">
          <van-image round fit="cover" class="avatar" :src="item.photo" />

          <div class="desc">
            <span class="name"> {{ item.name }}</span>
            <span class="fensi"> 粉丝:{{ item.fans_count }}</span>
          </div>
        </div>

        <span class="right"
          >相互关注:{{ item.mutual_follow ? '是' : '否' }}</span
        >
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { getFollowingsAPI } from '@/api'
export default {
  name: 'FollowingsIndex',
  data () {
    return {
      loading: false,
      finished: false,
      totalCount: 0,
      list: [],
      error: false,
      page: 1, // 当前页码
      per_page: 20 // 页码容量
    }
  },

  methods: {
    async onLoad () {
      this.loading = true
      try {
        // 1. 请求获取数据
        const { data } = await getFollowingsAPI({
          page: this.page,
          per_page: this.per_page
        })
        // console.log(data)
        const { results } = data.data
        this.totalCount = data.data.total_count
        this.list.push(...results)
        this.loading = false

        this.page++

        // 4. 判断数据是否加载结束
        if (!results.length) {
          this.finished = true
        }

        // console.log(this.list)
      } catch (err) {
        console.log(err)
        this.error = true
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.followings {
  padding-top: 80px;
}

.venCell {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .desc {
      display: flex;
      flex-direction: column;
      .name {
        font-weight: 700;
      }
      .fensi {
        color: #ccc;
      }
    }
  }
}

.avatar {
  width: 120px;
  height: 120px;
  margin-right: 10px;
  border: 2px solid rgb(223, 221, 221);
}
</style>
